<template>
    <el-card>
         <!-- 路径导航 -->
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 主体内容 -->
        <!-- 筛选区域 -->
        <div class="filter-bar">
            <!-- 筛选表单 -->
            <div class="l-form">
                <el-input size="small" placeholder="请输入内容" v-model="query" clearable @clear="resetQuery">
                    <template slot="append"> <i @click="searchQuery" class="el-icon-search"></i> </template>
                </el-input>
            </div>
            <!-- 右侧按钮 -->
            <div class="r-btn">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="$router.push('/goods/add')">增加</el-button>
            </div>
        </div>
        <!-- 表格区域 -->
        <div class="table-box">
            <!-- 表格 -->
            <el-table :data="goodList" border >
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_id" label="ID" width="80"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="500"></el-table-column>
                <el-table-column prop="goods_price" label="价格" width="80"></el-table-column>
                <el-table-column prop="goods_number" label="数量" width="80"></el-table-column>
                <el-table-column prop="goods_state" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.goods_state ==0 ">未通过</el-tag>
                        <el-tag type="info"  v-if="scope.row.goods_state ==1 ">审核中</el-tag>
                        <el-tag type="info"  v-if="scope.row.goods_state ==2 ">已通过</el-tag>
                     </template>
                </el-table-column>
                <el-table-column prop="is_promote" label="是否热销">
                     <template slot-scope="scope">
                          <el-tag type="success"  v-if="scope.row.is_promote">是</el-tag>
                          <el-tag type="info" v-else>否</el-tag>
                     </template>
                </el-table-column>
                <el-table-column prop="add_time" label="创建时间" width="200">
                     <template slot-scope="scope">
                         {{scope.row.add_time | formateTime}}
                     </template>
                </el-table-column>
                <el-table-column  label="操作" width="150" fixed="right">
                    <template>
                         <el-button 
                            type="success" 
                            size="small"  
                            circle 
                            icon="el-icon-edit"
                        ></el-button>
                        <el-button 
                            type="danger" 
                            size="small"  
                            circle 
                            icon="el-icon-delete"
                        ></el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page.sync="pagenum"
                :page-sizes="[10, 40, 80, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" background>
                >
            </el-pagination>
            
        </div>
    </el-card>
</template>

<script>
    export default {
        data() {
            return {
                query: '', // 关键字
                goodList:[],  // 商品列表
                pagenum:1,  // 页码数
                pagesize:10, // 每页数量
                total:0  // 总数
            }
        },
        created () {
            this.getGoodList()
        },
        methods: {
            async getGoodList(){
                let { data:res } = await this.$axios.get('goods',{
                    params:{
                        query:this.query,
                        pagenum:this.pagenum,
                        pagesize:this.pagesize
                    }
                })
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                this.total  = res.data.total
                this.goodList = res.data.goods
            },
            // 关键字查询
            searchQuery() {
                // 页码要归1
                this.pagenum = 1
                // 再次拉取列表
                this.getGoodList()
            },
            // 搜索重置
            resetQuery(){
                this.query = ''
                this.pagenum = 1
                this.getGoodList()
            },
            // 页码更换
            pageChange(val){
                this.pagenum = val
                this.getGoodList()
            },
            // 每页数量变化
            sizeChange(val){
                this.pagesize = val
                this.getGoodList()
            }
        },
    }
</script>

<style lang="less" scoped>

</style>